<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org"
      xmlns:layout="http://www.ultraq.net.nz/web/thymeleaf/layout"
      layout:decorate="layout/layout_dl">

<div layout:fragment="main-content" style="margin: 0 auto;height: 100vh;position: relative;">

    <style>
        .login-box{
            margin: 0 auto;     margin: auto;
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            height: 400px;
        }
    </style>
    <div class="login-box" style="">

        <div class="login-logo">
            <b th:text="'登录'"></b>
        </div>
        <!-- /.login-logo -->
        <form th:action="@{/admin/login}" data-validator-option="{theme:'bootstrap', timely:2, theme:'simple_bottom'}"
              method="post">
            <div class="login-box-body">
                <p class="login-box-msg">请输入用户名和密码登录</p>
                <div th:if="${session.loginError}" class="alert alert-danger alert-dismissible">
                    <h4 style="margin-bottom: 0px;"><i class="fa fa-exclamation-triangle"></i> <span
                            th:text="${session.loginError}">登录错误</span></h4>
                </div>
                <div class="form-group has-feedback mg">
                    <input type="text" class="form-control" name="username" placeholder="用户名"
                           data-rule="用户名:required;username;" value="admin">
                    <span class="glyphicon glyphicon-TUser form-control-feedback"></span>
                </div>
                <div class="form-group has-feedback mg">
                    <input type="password" class="form-control" name="password" placeholder="密码"
                           data-rule="密码:required;password;" value="123">
                    <span class="glyphicon glyphicon-lock form-control-feedback"></span>
                </div>
                <div class="form-group has-feedback clear_fix">
                    <div class="form-group has-feedback mg" style="width: 133px; float: left;">
                        <input type="text" class="form-control" name="captcha" placeholder="验证码"
                               data-rule="验证码:required;length(5);" size="5" value="123">
                        <span class="glyphicon glyphicon-warning-sign form-control-feedback"></span>
                    </div>
                    <div class="form-group has-feedback " style="float: right;">
                        <img alt="如果看不清楚，请单击图片刷新！" style="height: 38px;" class="pointer img" id="captcha" onclick="refreshCaptcha()" src="/admin/kaptcha2">
                        <span onclick="refreshCaptcha()">点击刷新</span>
                    </div>
                </div>

                <div>
                    <div class="col-xs-8">
                        <div class="checkbox icheck">
                        </div>
                    </div>
                    <!-- /.col -->
                    <div  style="text-align: center; width: 100%;">
                        <button type="submit" class="btn btn-primary btn-block btn-flat"><i class="fa fa-sign-in"></i>
                            登录
                        </button>
                    </div>
                    <!-- /.col -->
                </div>
                <!-- /.social-auth-links -->
            </div>
        </form>
    </div>
</div>

<script layout:fragment="business-script">

    function refreshCaptcha(){
        var captcha = document.getElementById("captcha");
        captcha.setAttribute("src","/admin/kaptcha2?r=" + Math.random());
    }
</script>

